<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="index.css">
    <link rel="stylesheet" href="../../assets/icon/engineeringIcon/iconfont.css">
</head>
<body>
<div class="deskTopLyricWrap">
    <div class="settingWrap">
        <span class="iconfont icon-yinfu"></span>
        <span class="iconfont icon-shangyiqu"></span>
        <span class="iconfont icon-24gf-play"></span>
<!--        <span class="iconfont icon-zanting"></span>-->
        <span class="iconfont icon-xiayiqu"></span>
        <span class="iconfont icon-31shezhi"></span>
        <span class="iconfont icon-ziyuan1"></span>
        <span class="iconfont icon-guanbi"></span>
    </div>
    <div class="lyricWrap">音乐, 让你我更近</div>
</div>
</body>
</html>
<script type="module">
    import { io } from "https://cdn.socket.io/4.3.2/socket.io.esm.min.js";
    const socket = io('ws://localhost:3000');
    // 关闭 icon dom节点
    let close = document.querySelector('.icon-guanbi');
    let lyricWrap = document.querySelector('.lyricWrap');
    let timer = null;
    let timer_2 = null;

    // 关闭桌面歌词渲染进程组件
    close.onclick = () => {
        window.deskTopLyricApi.closeDesktopLyricWin()
        socket.emit('desktop-to-v', false);
    }
    socket.on("connect", () => {
        console.log('连接成功');
        console.log(socket.connected)
    });
    socket.on("disconnect", () => {
        console.log('连接中断');
    });
    clearInterval(timer);
    timer = setInterval(() => {
        socket.emit('send-test', '', response => lyricWrap.innerText = response.lyric)
    }, 1000)
    clearInterval(timer_2);
    timer_2 = setInterval(() => {
        socket.emit('closeDesktopLyrics_two', '' , (response) => {
            if (response) window.deskTopLyricApi.closeDesktopLyricWin()
        })
    }, 1000)
</script>
